<template>
  <el-row v-loading="loading">

    <el-col :span="24">
      <vaccin-order-edit ref="vaccinOrderEdit" v-on:save-finished="getHealthyPlanList()"></vaccin-order-edit>
      <!--<role-permission ref="rolePermission"></role-permission>-->
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="姓名" size="small" v-model="search.name">
            <el-button slot="append" icon="el-icon-search" @click="getHealthyPlanList()"></el-button>
          </el-input>
        </el-col>
        <!--<el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small"
            v-show="permission.add" @click="handleCreateRole()">添加</el-button>
        </el-col>-->
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="tVaccinList" border size="mini" header-cell-class-name="header-row">
             <el-table-column type="selection" header-align="center" align="center">
              <template >
                <el-checkbox  ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="vaccinName" label="姓名" header-align="center" width="100px"></el-table-column>
            <el-table-column prop="vaccinIdCard" label="身份证号" header-align="center" width="200px"></el-table-column>
            <el-table-column prop="vaccinPhone" label="电话" header-align="center"></el-table-column>
            <el-table-column prop="tVaccinDept.deptName" label="厂家" header-align="center"></el-table-column>
            <el-table-column prop="tVaccinDept.vaccinType" label="疫苗类型" header-align="center"></el-table-column>
            <el-table-column prop="" label="接种针数" header-align="center" width="100px">
                <template slot-scope="scope">
                  第{{scope.row.vaccinCount}}针
                </template>
            </el-table-column>
            <el-table-column prop="" label="接种时间" header-align="center">
               <template slot-scope="scope">
                  {{scope.row.vaccinDate | dateFormat}}
                </template>
            </el-table-column>
            <el-table-column prop="vaccinAddress" label="接种地点" header-align="center" width="200px"></el-table-column>
          <!--  <el-table-column label="操作" header-align="center" align="center" width="200">
              <template slot-scope="scope">
                <el-button v-show="permission.edit" type="primary" size="mini"
                  @click="handleEditSportKnowledge(scope.$index, scope.row)">编辑</el-button>
                <el-button v-show="permission.remove" type="danger" size="mini"
                  @click="handleDeleteSportKnowledge(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>-->
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tVaccinTotal">
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { listTVaccin, getTVaccinById, removeTVaccin } from '@/api/xsf/vaccinOrder'
import { listResourcePermission } from "@/api/resource"
import VaccinOrderEdit from "@/components/vaccinOrder/VaccinOrderEdit"
//import RolePermission from "@/components/role/rolePermission"

export default {
  data() {
    return {
      loading: false,
      permission: {
        add: true,
        edit: true,
        remove: true
      },
      search: {
        name: '',
        offset: 0,
        limit: 5,
        currentPage:1
      },
      tVaccinTotal: 0,
      tVaccinList: []
    }
  },
  methods: {
    getHealthyPlanList() {
      this.loading = true
      listTVaccin(this.search)
      .then(response => {
        this.tVaccinTotal = response.data.total
        this.tVaccinList = response.data.rows
        this.loading = false
      })
      .catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = (this.search.currentPage - 1) * val
      this.getHealthyPlanList()
    },
    handleCurrentChange(val) {
      this.search.offset = (val - 1) * this.search.limit
      this.search.currentPage = val
      this.getHealthyPlanList()
    },
    async pageInit() {
      this.loading = true
      try {
        let [listTVaccinResp, listPermissionResp] = await Promise.all([
          listTVaccin(this.search),
          listResourcePermission(this.$route.meta.routerId)
        ])
        this.tVaccinTotal = listTVaccinResp.data.total
        this.tVaccinList = listTVaccinResp.data.rows
        /*this.permission.add = listPermissionResp.data.find(item => {
          return item.resourcePermission === "roles:create"
        })
        this.permission.edit = listPermissionResp.data.find(item => {
          return item.resourcePermission === "roles:update"
        })
        this.permission.remove = listPermissionResp.data.find(item => {
          return item.resourcePermission === "roles:delete"
        })*/
        this.loading = false
      } catch(error) {
        this.outputError(error)
      }
    },
    handleCreateRole() {
      this.$refs.vaccinOrderEdit.$emit('openAddRoleDialog')
    },
    handleEditSportKnowledge(index, row) {
      this.loading = true
      getTVaccinById(row.id)
      .then(response => {
        this.$refs.vaccinOrderEdit.$emit('openEditRoleDialog', response.data)
        this.loading = false
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    handleDeleteSportKnowledge(index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.loading = true
        removeTVaccin(row.id)
        .then(response => {
          this.loading = false
          this.getHealthyPlanList()
        })
        .catch(error => {
          this.outputError(error)
        })
      })
      .catch(() => {})
    },
    handleSetPermission(index, row) {
      this.$refs.rolePermission.$emit('openSetPermissionDialog', row)
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })
    }
  },
  components: { VaccinOrderEdit, /*RolePermission*/ },
  created() {
    this.pageInit()
  },
  filters:{
        dateFormat:function(data){
          var dt=new Date(data)
          var n=dt.getFullYear();
          var y=(dt.getMonth()+1).toString().padStart(2,"0");//补零操作
          var r=(dt.getDate()).toString().padStart(2,"0");
          dt.getHours();
          dt.getMinutes();
          dt.getSeconds();
          return n+"-"+y+"-"+r;
  }}
}
</script>

<style lang="scss" scoped>
.search-row {
  padding-bottom: 8px;
  .el-input {
    width: 260px;
  }
}

.role-locked {
  color: red;
}
.role-not-locked {
  color: green;
}
</style>
